<template>
    <el-container>
        <el-main class="menu-wrapper">
            <el-form ref="addPromotion" :model="addPromotion" :rules="rules" label-width="90px">
                <div style="display: flex">
                    <el-form-item label="活动名称" style="width: 400px" prop="title">

                        <el-input style="width: 400px" v-model="addPromotion.title" placeholder="请输入促销标题"></el-input>

                    </el-form-item>
                </div>

                <div style="display: flex">
                    <el-form-item label="起止日期" prop="dateTime" style="width: 400px">
                        <el-date-picker style="width: 400px" v-model="addPromotion.dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="活动描述" style="width: 400px">
                        <el-input style="width: 400px" v-model="addPromotion.introduction" placeholder="请输入促销说明"></el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="消费金额" prop="minimumPrice" style="width: 400px" v-if="addPromotion.type===4||addPromotion.type===5||addPromotion.type===6||addPromotion.type===3||addPromotion.type===1">

                        <el-input style="width: 200px" v-model="addPromotion.minimumPrice" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent placeholder="如消费满100生效,输入金额"></el-input>

                    </el-form-item>
                </div>
                <el-form-item style="width: 400px" prop="firsted" v-if="addPromotion.type===3||addPromotion.type===5||addPromotion.type===4||addPromotion.type===1">
                    <el-checkbox v-model="addPromotion.firsted">只适用于首单生效</el-checkbox>
                </el-form-item>

                <el-form-item style="width: 400px" prop="overlying" v-if="addPromotion.type===3||addPromotion.type===5||addPromotion.type===4||addPromotion.type===1">
                    <el-checkbox v-model="addPromotion.overlying">活动是否与单品活动共享</el-checkbox>
                </el-form-item>
                <div style="display: flex" v-if="addPromotion.type===0||addPromotion.type===1||addPromotion.type===2||addPromotion.type===5">

                    <el-form-item label="赠品类型" prop="giftType">
                        <el-select style="width: 400px" v-model="addPromotion.giftType" filterable>
                            <el-option label="礼品" value="0" v-if="addPromotion.type!=0"></el-option>
                            <el-option label="赠券" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-if="addPromotion.giftType==='0'" type="primary" @click="addGift('添加')">添加</el-button>
                        <el-button v-if="addPromotion.giftType==='1'" type="primary" @click="addCoupon('添加')">添加</el-button>
                    </el-form-item>

                </div>
                <div style="display: flex; flex-direction: column" v-if="addPromotion.giftType==='0'">
                    <el-form-item label="赠品清单" prop="giftType" style="width: 650px">
                        <gift-list style="width:100%" :giftType="addPromotion.giftType" ref="child"></gift-list>
                    </el-form-item>
                    <div style="width: 650px; padding-left: 90px">
                        <el-alert title="礼品：礼品和订单一起发货给客户" type="error" :closable="false">
                        </el-alert>
                    </div>
                </div>
                <div style="display: flex; flex-direction: column" v-if="addPromotion.giftType==='1'">
                    <el-form-item label="赠品清单" prop="giftType" style="width: 650px">
                        <coupon style="width:100%" :couponType="addPromotion.giftType" ref="couponAdd"></coupon>
                    </el-form-item>
                    <div style="width: 650px; padding-left: 90px;">
                        <el-alert title="赠券：订单完成后发放至客户卡包" type="error" :closable="false">
                        </el-alert>
                    </div>
                </div>
                <!--<div style="display: flex">-->
                    <!--<el-form-item label="投放次数" prop="stock" style="width: 400px" v-if="addPromotion.type==2">-->

                        <!--<el-input v-model="addPromotion.stock" @mousewheel.native.prevent @DOMMouseScroll.native.prevent type="number"></el-input>-->

                    <!--</el-form-item>-->
                <!--</div>-->
                <div>
                    <el-form-item label="参与会员" style="width: 400px; margin-top: 10px">
                        <el-select style="width: 400px" v-model="vipsvalue" multiple filterable allow-create default-first-optionplaceholder="请选择可参与会员" @change="vipschanges">
                            <el-option v-for="item in vipslist" :key="item.id" :label="item.name" :value="item.vip"></el-option>
                        </el-select>

                    </el-form-item>
                </div>

                <div>
                    <el-form-item label="参与城市" >
                        <queryCascader style="width: 400px" @queryCascaderclick=queryCascaderclick></queryCascader>
                    </el-form-item>
                </div>

                <el-form-item>

                    <el-button type="primary" :loading="clicked" @click="savePromotion('addPromotion')">确 定</el-button>

                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
import { EventBus } from "@/api/eventBus";
import giftList from "../components/gift";
import coupon from "../components/coupon";
import SingleUpload from "@/components/Upload/singleUpload";
import { save } from "@/api/promotion";
import { list } from "@/api/vip";
import queryCascader from "@/components/Query/queryCascader";

export default {
    name: "fullgift-add",

    data() {
        return {
            vipslist: [], //获取vip列表
            vipsvalue: [],
            giftTypeList: [],
            clicked: false,
            rules: {
                type: [
                    {
                        required: true,
                        message: "请输入选择类型",
                        trigger: "change",
                    },
                ],
                agioRate: [
                    {
                        required: true,
                        message: "请输入满减比例",
                        trigger: "blur",
                    },
                ],
                amount: [
                    { required: true, message: "请输入金额", trigger: "blur" },
                ],
                title: [
                    {
                        required: true,
                        message: "请输入促销标题",
                        trigger: "blur",
                    },
                ],
                minimumPrice: [
                    { required: true, message: "请输入数量", trigger: "blur" },
                ],
                memo: [
                    {
                        required: true,
                        message: "请输入等级描述",
                        trigger: "blur",
                    },
                ],
                enterpriseId: [
                    {
                        required: true,
                        message: "请输入所属企业",
                        trigger: "blur",
                    },
                ],
                integer: [
                    {
                        required: true,
                        message: "请输入优先级",
                        trigger: "blur",
                    },
                ],
                introduction: [
                    {
                        required: true,
                        message: "请输入促销说明",
                        trigger: "blur",
                    },
                ],
                dateTime: [
                    {
                        required: true,
                        message: "请选择活动时间",
                        trigger: "change",
                    },
                ],
            },
            addPromotion: {
                dateTime: [],
                givenAmount: "",
                agioRate: "",
                stock: 0,
                amount: "",
                firsted: false,
                giftType: "",
                gifts: [],
                introduction: "",
                minimumPrice: 0,
                modifyDate: "",
                orders: "",
                overlying: false,
                thumbnail: "",
                title: "",
                type: 5,
                areaList: "",
            },
        };
    },
    created() {
        this.loadVip();
    },
    methods: {
        vipschanges(val) {
            this.addPromotion.vips = "";
            val.forEach((item) => {
                this.addPromotion.vips += item;
            });
        },
        loadVip() {
            list().then((res) => {
                console.log(res);
                this.vipslist = res.data.data;
            });
        },
        addGift(type) {
            type === "添加"
                ? this.$refs.child.add()
                : this.$refs.editChild.add();
        },
        addCoupon(type) {
            type == "添加"
                ? this.$refs.couponAdd.add()
                : this.$refs.editCouponAdd.add();
        },
        savePromotion(addPromotion) {
            if (this.addPromotion.type === "") {
                this.clicked = false;
            }
            this.$refs[addPromotion].validate((valid) => {
                if (valid) {
                    this.clicked = true;
                    var addPromotion = {
                        stock: this.addPromotion.stock,
                        agioRate: this.addPromotion.agioRate,
                        amount: this.addPromotion.amount,
                        firsted: this.addPromotion.firsted,
                        giftType: this.addPromotion.giftType,
                        gifts: [],
                        introduction: this.addPromotion.introduction,
                        minimumPrice: this.addPromotion.minimumPrice,
                        modifyDate: new Date(),
                        beginDate: "",
                        endDate: "",
                        status: 0,
                        orders: this.addPromotion.orders,
                        overlying: this.addPromotion.overlying,
                        thumbnail: this.addPromotion.thumbnail,
                        title: this.addPromotion.title,
                        type: this.addPromotion.type,
                        vips: this.addPromotion.vips,
                        areaList: this.addPromotion.areaList,
                    };
                    if (this.addPromotion.dateTime.length > 0) {
                        addPromotion.beginDate = this.addPromotion.dateTime[0];
                        addPromotion.endDate = this.addPromotion.dateTime[1];
                    }
                    if (
                        this.addPromotion.type != 0 &&
                        this.addPromotion.type != 1 &&
                        this.addPromotion.type != 2 &&
                        this.addPromotion.type != 5
                    ) {
                        this.giftTypeList = [];
                    } else {
                        if (this.addPromotion.giftType == 0) {
                            if (
                                this.$refs.child &&
                                this.$refs.child.gifts.length > 0
                            ) {
                                this.giftTypeList = this.$refs.child.gifts;
                            } else {
                                this.giftTypeList = [];
                            }
                        } else if (this.addPromotion.giftType == 1) {
                            if (
                                this.$refs.couponAdd &&
                                this.$refs.couponAdd.coupons.length > 0
                            ) {
                                this.giftTypeList =
                                    this.$refs.couponAdd.coupons;
                            } else {
                                this.giftTypeList = [];
                            }
                        }
                    }
                    if (this.addPromotion.type === 6) {
                        addPromotion.title =
                            "满" + addPromotion.minimumPrice + "包邮";
                    } else if (this.addPromotion.type === 3) {
                        addPromotion.title =
                            "满" +
                            addPromotion.minimumPrice +
                            "减" +
                            addPromotion.amount;
                    } else if (this.addPromotion.type === 4) {
                        addPromotion.title =
                            "满" +
                            addPromotion.minimumPrice +
                            "打" +
                            addPromotion.agioRate +
                            "折";
                    }
                    addPromotion.gifts = this.giftTypeList;
                    console.log(addPromotion);
                    save(addPromotion)
                        .then((response) => {
                            EventBus.$emit("fullgift-add", response.data);
                            this.$store
                                .dispatch("tagsView/delView", this.$route)
                                .then(({ visitedViews }) => {
                                    this.$router.push({
                                        path: "/fullgift/list",
                                    });
                                });
                            console.log(response);
                            this.clicked = false;
                        })
                        .catch((error) => {
                            this.clicked = false;
                            console.log("error");
                        });
                } else {
                    this.clicked = false;
                }
            });
        },
        queryCascaderclick(data) {
            this.addPromotion.areaList = data;
        },
    },
    filters: {
        watchAmountType(val) {
            if (val == 3) {
                return "满减金额";
            } else if (val == 7) {
                return "充值金额";
            }
        },
    },
    components: {
        SingleUpload,
        giftList,
        coupon,
        queryCascader,
    },
};
</script>

<style scoped>
.menu-wrapper {
    margin: 15px;
}
.dialog-button-slot {
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
</style>
